<template>
  <a-modal
    :title="$t('批量修改')"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    :okText="$t('确定')"
    @cancel="handleCancel"
    :cancelText="$t('关闭')"
    v-drag
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="dataForm" :rules="rules" :labelCol="{ span: 10 }" :wrapperCol="{ span: 11 }">
        <a-form-model-item :label="$t('当前未指派会员')">
          <div>
            <span style="color: red">{{ num }}</span> {{ $t('个') }}
          </div>
        </a-form-model-item>
        <a-form-model-item :label="$t('本次预分配人数')" prop="num">
          <a-input v-model="dataForm.num"></a-input>
        </a-form-model-item>
        <a-form-model-item
          :label="$t('指派给业务员')"
          prop="salesmanId"
        >
          <a-select
            v-model="dataForm.salesmanId"
            allowClear
            show-search
            :filter-option="false"
            :not-found-content="null"
            @search="handleSearch"
          >
            <a-select-option v-for="item in memberList" :key="item.id" :value="item.id" @click="handleMember(item)">{{
              item.name
            }}</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import { getAction, postAction } from '@/api/manage'

export default {
  name: 'RandomModal',
  components: {},
  data() {
    return {
      editState: '',
      saveState: '',
      title: '操作',
      width: 600,
      visible: false,
      model: {},
      goodsIdList: [],
      confirmLoading: false,
      reultList: [],
      dataForm: {
        num: '',
        salesmanId: '',
      },
      queryList: [],
      optionType: [],
      memberList: [],
      num: '',
      rules: {
        num: [{ required: true, message: this.$t('请输入') }],
        salesmanId: [{ required: true, message: this.$t('请选择业务员') }],
      },
    }
  },
  methods: {
    edit() {
      let that = this
      that.visible = true
      that.dataForm = {
        num: '',
        salesmanId: '',
      }
      that.getSalemanList()
      let query = {
        pageNo: 1,
        pageSize: 9999,
      }
      getAction('/business/customerManage/unManageNum', query).then((res) => {
        if (res.success) {
          that.num = res.result
        }
      })
    },
    getSalemanList(value) {
      let query = {
        pageNo: 1,
        pageSize: 10,
      }
      if (value) {
        query.name = ',' + value + ','
      }
      getAction('/member/bisSalesman/list', query).then((res) => {
        if (res.success) {
          this.memberList = res.result.records
        }
      })
    },
    handleSearch(value) {
      this.getSalemanList(value)
    },
    handleMember(item) {
      this.dataForm.salesmanId = item.id
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      const that = this
      that.$refs.form.validate((valid) => {
        if (valid) {
          let query = {
            num: that.dataForm.num,
            salesmanId: that.dataForm.salesmanId,
          }
          postAction('/business/customerManage/addListRandom', query).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.visible = false
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          })
        }
      })
    },
    handleCancel() {
      this.close()
    },
  },
}
</script>
<style>
.batchForm .ant-form-item-label {
  width: 30%;
}
.batchForm .ant-form-item-control-wrapper {
  width: 62.5%;
}
</style>